import React, { Fragment } from 'react'
import { useTypes } from '../../hook/types';
// 引入antd
import { message } from 'antd';

import {
    Form,
    Input,
    Button,
    Card,
} from 'antd';

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};




//eslint-disable-next-line
export default () => {
    const [, { addTypes }] = useTypes()
    // const history = useHistory();
    // 指向输入框
    const [form] = Form.useForm();
    const onFinish = async (values) => {
        const { title } = values;
        const data = await addTypes({ title })
        if (data) {
            message.success("添加成功");
            form.resetFields()
        }else {
            message.error('添加失败！');
        }

    };

    return <Fragment>
        <Card title="新增类型" bordered={true} style={{ margin: "30px" }}>
            <Form
                {...formItemLayout}
                form={form}
                name="addTypes"
                initialValues={{
                    prefix: '86',
                }}
                onFinish={onFinish}
                scrollToFirstError
                style={{ width: "500px", margin: "auto" }}
            >
                <Form.Item
                    name="title"
                    label="title"
                    rules={[
                        {
                            required: true,
                            message: '请输入类型名称！',
                        },
                    ]}
                >
                    <Input placeholder="请输入类型名称" />
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        添加类型
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    </Fragment>
}